﻿<!DOCTYPE html>
<!--运行情况综合信息板-->
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="/static/js/common.js"></script>

    <script src="/static/js/echarts2.0.js"></script>
    <link href="/static/css/style.css" rel="stylesheet">
    <style>
        body {
            padding-bottom: 10px;
        }

        .toptitle label {
            margin-left: 20px;
        }

        .align_left {
            text-align: left;
        }

        table {
            width: 100%;
            border-top: 0px solid;
            border-left: 0px solid;
            text-align: center;
            border: 1px solid #f7f5f5;
            /*border-right: none;*/
        }

        table td {
            border-right: 0px solid;
            border-bottom: 0px solid;
            border: 1px solid #f7f5f5;
            /*height:38px;*/
            /* padding: 10px; */
        }

        .floatDiv {
            position: fixed;
            top: 10%;
            left: 1px;
            border: 1px solid #ccc;
            background: #EBEEF5;
            cursor: pointer;
            width: 14px;
            font-size: 14px;
            padding: 10px;
        }
        
    </style>
</head>

<body>
    <div id="app" v-cloak class="popupW50 pad15">
           
        
        <table cellpadding="0" cellspacing="0" style="width:100%;float:left;">
            <ttr>
                <td colspan="2" style="border:0;"> <div class="new_title"><strong><img src="/static/images/icon1.png" />首页</strong></div>
                    <!-- new_title --></td>
                </ttr>
            <tr>
                <td width="50%" style="margin: 0 -1px;            display: block;
                float: left;">
                    <div id="ChartBox" style="height:400px;margin-top:50px;"></div>
                </td>
                <td width="50%" style="margin: 0 -1px;            display: block;
                float: left;">
                    <div id="ChartBox2" style="height:400px;margin-top:50px;"></div>
                </td>
            </tr>
            <tr>
                <td width="50%" style="margin: 0 -1px;            display: block;
                float: left;">
                    <div id="ChartBox3" style="height:400px;margin-top:50px;"></div>
                </td>
                <td width="50%" style="margin: 0 -1px;            display: block;
                float: left;">
                    <div id="ChartBox5" style="height:400px;margin-top:50px;"></div>
                </td>
            </tr>
            <tr>
                <td width="100%" colspan="2" style="padding: 10px 0;            display: block;
                float: left;">
                    <br>
                    <div>
                        <el-form label-position="right" ref="form" :inline="true" :model="formInline"
                            class="demo-form-inline" style="margin-bottom: 15px;">
                            <el-row>
                                <div class="elst-select-mini fl ml10">
                                    <el-form-item>
                                        <el-input size="mini">
                                            <template slot="prepend">
                                                {{BoardMent.RiskEChart.timeStart+mark.m}}
                                            </template>
                                            <!-- <el-date-picker v-model="formInline.model.DiscoveryTimeBegin" type="date" slot="suffix" -->
                                            <el-date-picker v-model="formInline.model.DateBegin" type="date"
                                                format="yyyy-MM-dd" value-format="yyyy-MM-dd" slot="suffix" size="mini"
                                                placeholder="选择日期">
                                            </el-date-picker>
                                        </el-input>
                                    </el-form-item>
                                </div>
                                <div class="elst-select-mini fl ml10">
                                    <el-form-item>
                                        <el-input size="mini">
                                            <template slot="prepend">
                                                {{BoardMent.RiskEChart.timeEnd+mark.m}}
                                            </template>
                                            <!-- <el-date-picker v-model="formInline.model.DiscoveryTimeEnd" type="date" slot="suffix" -->
                                            <el-date-picker v-model="formInline.model.DateEnd" type="date" slot="suffix"
                                                size="mini" placeholder="选择日期" format="yyyy-MM-dd"
                                                value-format="yyyy-MM-dd">
                                            </el-date-picker>
                                        </el-input>
                                    </el-form-item>
                                </div>

                                <!-- <el-col :xs="12" :sm="8" :md="6" :lg="6" :xl="6">

                                    <div class="elst-select-mini">
                                        <el-form-item>
                                            <el-input size="mini">
                                                <template slot="prepend">
                                                    选择天数{{mark.m}}
                                                </template>
                                                <el-select @visible-change="visibleChange" v-model="formInline.model.RiskType" slot="suffix"
                                                    :placeholder="BoardMent.RiskEChart.SelectDateNum">
                                                    <el-option label="选择天数" value=""></el-option>
                                                    <el-option v-for="item in RiskType" :label="item.value"
                                                        :value="item.key"></el-option>
                                                </el-select>
                                            </el-input>
                                        </el-form-item>
                                    </div>
                                </el-col> -->



                                <el-button class="fl ml10" type="primary" @click="dataSearch">{{col.btnSelect}}
                                </el-button>





                            </el-row>

                        </el-form>
                    </div>
                    <div id="ChartBox4" style="height:400px;margin-top:10px;"></div>
                </td>
            </tr>
        </table>



        <el-row>
            <el-col :span="24">


            </el-col>
        </el-row>
        <el-dialog title="Echart" :visible.sync="ListItem.dialogVisible" @close='closeDialog' width="80%" height="80%"
            top="10vh">
            <iframe ref="iframe" :src="ListItem.InputUrl" style="height:95%;width:100%" frameborder="0"></iframe>
        </el-dialog>
    </div>
    <script type="text/javascript">
        // 动态获取日期
        var temp = [];
        for (var i = 0; i < 90; i++) {
            var myDate = new Date(new Date().setDate(new Date().getDate() - i));    //获取当前年份(2位)
            var year = myDate.getFullYear();    //获取完整的年份(4位,1970-????)
            var month = myDate.getMonth();       //获取当前月份(0-11,0代表1月)
            if (month < 10) {
                month = "0" + (month * 1 + 1);
            };
            var day = myDate.getDate();        //获取当前日(1-31)
            if (day < 10) {
                day = "0" + day;
            };
            var dayNow = year + '-' + (month) + "-" + day;
            temp.push(dayNow)
        }
        var dataJson = temp.reverse()
        // 获取随机数 ---  90位  10-100范围
        var randoms = [];
        while (true) {
            // var isExists = false;
            // 获取一个10–100范围的数
            var random = parseInt(10 + (90 - 10) * (Math.random()))
            // 判断当前随机数是否已经存在
            // for (var i = 0; i < randoms.length; i++) {
            //     if (random === randoms[i]) {
            //         isExists = true;
            //         break;
            //     }
            // }
            // 如果不存在，则添加进去
            // if (!isExists)
            randoms.push(random);
            // 如果有10位随机数了，就跳出
            if (randoms.length === 90)
                break;
        }
        var randoms2 = [];
        while (true) {
            // var isExists = false;
            // 获取一个10–100范围的数
            var random = parseInt(10 + (90 - 10) * (Math.random()))
            // 判断当前随机数是否已经存在
            // for (var i = 0; i < randoms.length; i++) {
            //     if (random === randoms[i]) {
            //         isExists = true;
            //         break;
            //     }
            // }
            // 如果不存在，则添加进去
            // if (!isExists)
            randoms2.push(random);
            // 如果有10位随机数了，就跳出
            if (randoms2.length === 90)
                break;
        }
        app = new Vue({
            el: '#app',
            data: {
                id: '0',
                startDay: '',
                endDay: '',
                mydata: null,
                // mytree: myTree,
                //页面内数据初始化
                ListItem: ListItem,
                formInline: {
                    model: {
                        type: 'RiskCategory',
                        DateBegin: '',
                        DateEnd: '',
                        RiskType: '',
                        //RiskLevel: '',
                        Department: ''
                    },
                },
                RiskType: [],
                //RiskLevel: [],
                Department: [],
                legend: [],
                //data: [],
                title: '',
                subtext: ''
            },
            mounted: function () {
                //this.RiskLevel = getDicData('03');//字典内容
                //// tablehigh(this);//计算table高度以及el-tab-pane高度
                //this.RiskType = getDicData('100');
                this.RiskType = [
                    { key: '001', value: '3天' },
                    { key: '002', value: '6天' },
                    { key: '003', value: '9天' },
                ];

                console.log('xxxxxx', this.RiskType);
                // this.Department = fn(this.mytree, "0");
                //初始化数据
                this.getData();
                //获取数据
                this.mydata = {
                    title: this.title,
                    subtext: this.subtext,
                    legend: this.legend,
                    data: this.data
                };

                //列表高度自适应
                tablehigh(this);
                // this.dataSearch();
                this.echarts();
                this.getDay();

            },
            methods: {
                //解決edge下select bug
                visibleChange: function (isVisible) {
                    visibleChange(isVisible)
                },
                dataSearch: function () {
                    var ss = this.formInline.model.DateBegin;
                    var ee = this.formInline.model.DateEnd;
                    this.echarts(ss, ee)
                },
                getDay: function () {
                    this.echarts(dataJson[75], dataJson[89])
                },
                echarts: function (s, e) {
                    this.startDay = s;
                    this.endDay = e;
                    var myChart4 = echarts.init(document.getElementById('ChartBox4'));

                    optionZ2 = {

                        title: {
                            text: '设备巡检1级报警和MES1级报警 数量N天内柱状Top展示',
                            subtext: ''
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            orient: 'vertical', // 'horizontal'
                            con: "none",   //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none

                            //itemWidth: 10,  // 设置宽度
                            //itemHeight: 10, // 设置高度
                            //itemGap: 40, // 设置间距

                            x: 'right', // 'center' | 'left' | {number},
                            //y: 'bottom', // 'top' | 'center' | 'bottom' | {number}

                            //data: app.mydata.legend3
                            data: ['设备巡检1级报警', 'MES1级报警']
                        },

                        calculable: true,
                        xAxis: [
                            {
                                type: 'category',
                                data: dataJson
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '设备巡检1级报警',
                                type: 'bar',
                                data: randoms,
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'inside'
                                    }
                                },

                                //设置柱子的宽度
                                // //barWidth: 30,
                                //配置样式
                                itemStyle: {
                                    //通常情况下：
                                    normal: {
                                        color: '#61a0a8',

                                    },
                                    //鼠标悬停时：
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                },

                            },
                            {
                                name: 'MES1级报警',
                                type: 'bar',
                                data: randoms2,
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'inside'
                                    }
                                },

                                //设置柱子的宽度
                                // //barWidth: 30,
                                //配置样式
                                itemStyle: {
                                    //通常情况下：
                                    normal: {
                                        color: '#90c8ae',

                                    },
                                    //鼠标悬停时：
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                },
                                ///////////////////////////////////////////////////////////////////

                            }
                        ],
                        "dataZoom": [{
                            "show": true,
                            // "start": 80,
                            // "end": 100,
                            startValue: this.startDay,
                            endValue: this.endDay,
                            bottom: 0,
                        }],
                    };
                    myChart4.setOption(optionZ2);
                },
                getDicValue: function (row, column, cellValue, index) {
                    if (cellValue) {
                        if (typeof cellValue === 'string' || typeof cellValue === 'number') {
                            return getTreeValue(this.mydata, cellValue)
                        }
                        else {
                            var result = '';
                            for (var i = 0; i < cellValue.length; i++) {
                                result += getTreeValue(this.mydata, cellValue[i]) + ',';
                            }
                            result = result.substr(0, result.length - 1);
                            return result;
                        }
                    }
                },
                getData: function () {
                    var mythis = this
                    myAjax("post", mythis, '/api/OperationBoard/get', mythis.formInline, function (response) {
                        mythis.legend = response.data.legend
                        mythis.data = response.data.data
                        mythis.title = response.data.title
                        mythis.subtext = response.data.subtext
                    }, false);

                },
                //获取分页数据
                GetPageData: function (currentIndex) {
                    //GetPageData(this, currentIndex, '/api/RiskLevel/GetList')
                },
                //查询方法
                onSubmit: function () { onSubmit(this); },
            }
        });




        var myChart = echarts.init(document.getElementById('ChartBox'));
        var myChart2 = echarts.init(document.getElementById('ChartBox2'));
        var myChart3 = echarts.init(document.getElementById('ChartBox3'));
        var myChart5 = echarts.init(document.getElementById('ChartBox5'));
        //var myChart6 = echarts.init(document.getElementById('ChartBox6'));





        option = {

            color: ['#c23630', '#90c8ae', '#d38365',  '#6e7173', '#74a082','#bca39a', '#61a0a8', '#ca8922', '#2f4653'],

            title: {
                text: app.mydata.title,
                //subtext: app.mydata.subtext,
                subtext: '',

            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical', // 'horizontal'
                con: 'rect',   //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none

                //itemWidth: 10,  // 设置宽度
                //itemHeight: 10, // 设置高度
                //itemGap: 40, // 设置间距

                x: 'right', // 'center' | 'left' | {number},
                //y: 'bottom', // 'top' | 'center' | 'bottom' | {number}

                data: app.mydata.legend
            },
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: app.mydata.data,
                    label: {
                        show: true,
                        formatter: '{b}: {d}%'
                    },
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };


        ////////////////////////////////////////////////////////////
        option2 = {

            color: ['#61a0a8', '#c23630'],

            title: {
                text: '隐患分类数量饼状展示',
                subtext: '',

            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical', // 'horizontal'
                con: "none",   //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none

                //itemWidth: 10,  // 设置宽度
                //itemHeight: 10, // 设置高度
                //itemGap: 40, // 设置间距

                x: 'right', // 'center' | 'left' | {number},
                //y: 'bottom', // 'top' | 'center' | 'bottom' | {number}
                data: ['分类1', '分类2'],
                //data: app.mydata.legend2
            },
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    //data: app.mydata.data2,
                    label: {
                        show: true,
                        formatter: '{b}: {d}%'
                    },
                    data: [
                        {
                            value: Math.floor(Math.random() * 500),
                            name: '分类1',
                           
                        },
                        {
                            value: Math.floor(Math.random() * 500),
                            name: '分类2'
                        }
                    ],

                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };


        option3 = {

            //color: ['#749f83', '#91c7ae', '#d48265', '#c23531', '#6e7074'],
            color: ['#d61a1a', '#ff0002', '#ff5f00', '#ffef00', '#0079ff'],
            title: {
                text: '隐患等级数量饼状展示',
                subtext: '',

            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical', // 'horizontal'
                con: "none",   //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none

                //itemWidth: 10,  // 设置宽度
                //itemHeight: 10, // 设置高度
                //itemGap: 40, // 设置间距

                x: 'right', // 'center' | 'left' | {number},
                //y: 'bottom', // 'top' | 'center' | 'bottom' | {number}

                //data: app.mydata.legend3
                data: ['重大', '一级', '二级', '三级', '四级'],
            },
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    //data: app.mydata.data3,
                    label: {
                        show: true,
                        formatter: '{b}: {d}%'
                    },
                    data: [
                        {
                            value: Math.floor(Math.random() * 500),
                            name: '重大'
                        },
                        {
                            value: Math.floor(Math.random() * 500),
                            name: '一级'
                        },
                        {
                            value: Math.floor(Math.random() * 500),
                            name: '二级'
                        },
                        {
                            value: Math.floor(Math.random() * 500),
                            name: '三级'
                        }

                        ,
                        {
                            value: Math.floor(Math.random() * 500),
                            name: '四级'
                        }
                    ],

                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        ////////////////////////////////optionZ1_begin////////////////////////////

        optionZ1 = {
            title: {
                // text: '各项总数量柱状展示',
                text: '安全类信息展示',
                subtext: ''
            },
            tooltip: {
                // trigger: 'axis'
            },
            legend: {

                orient: 'vertical', // 'horizontal'
                con: "none",   //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none

                //itemWidth: 10,  // 设置宽度
                //itemHeight: 10, // 设置高度
                //itemGap: 40, // 设置间距

                x: 'right', // 'center' | 'left' | {number},
                //y: 'bottom', // 'top' | 'center' | 'bottom' | {number}

                //data: app.mydata.legend3
                data: ['隐患信息', '设备巡检1级报警', 'MES1级报警', '特殊作业']
            },

            // calculable: true,
            xAxis: [

                // {
                //     type: 'category',
                //     axisTick: {
                //         show: false,
                //         color: '#707070'
                //     },
                //     axisLabel: {
                //         textStyle: {
                //             fontSize: 14,
                //             color: '#4D4D4D'
                //         }
                //     },
                //     axisLine: {
                //         lineStyle: {
                //             color: '#707070'
                //         }
                //     },
                //     data: ['低能见度1', '低能见度2', '低能见度3', '低能见度4', '低能见度5', '低能见度6'],
                // }
                {
                    type: 'category',
                    data: ['隐患信息.', '设备巡检1级报警', 'MES1级报警', '特殊作业']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '隐患信息',
                    type: 'bar',
                    barGap: '-100%',
                    itemStyle: {
                        normal: {
                            color: '#bfd5c6',
                        }
                    },
                    label: {
                        show: true,
                    },
                    data: [4100, null, null, null],
                },
                {
                    name: '设备巡检1级报警',
                    type: 'bar',
                    barGap: '-100%',
                    itemStyle: {
                        normal: {
                            color: '#90c8ae',
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'inside'
                        }
                    },
                    data: [null, 3600, null, null]
                },
                {
                    name: 'MES1级报警',
                    type: 'bar',
                    barGap: '-100%',
                    itemStyle: {
                        normal: {
                            color: '#bca39a',
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'inside'
                        }
                    },
                    data: [null, null, 500, null]
                },
                {
                    name: '特殊作业',
                    type: 'bar',
                    barGap: '-100%',
                    itemStyle: {
                        normal: {
                            color: '#d38365',
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'inside'
                        }
                    },
                    data: [null, null, null, 900]
                }

                // {
                //     name: '隐患信息',
                //     type: 'bar',
                //     value: '70',
                //     label: {
                //         normal: {
                //             show: true,
                //             position: 'inside'
                //         }
                //     },
                //     //设置柱子的宽度
                //     //barWidth: 30,
                //     //配置样式
                //     itemStyle: {
                //         //通常情况下：
                //         normal: {
                //             color: 'rgb(97,160,168)',
                //         },
                //         //鼠标悬停时：

                //     },
                // },
                // {
                //     name: '设备巡检1级报警',
                //     type: 'bar',
                //     value: '12',
                //     label: {
                //         normal: {
                //             show: true,
                //             position: 'inside'
                //         }
                //     },
                //     //设置柱子的宽度
                //     //barWidth: 30,
                //     //配置样式
                //     itemStyle: {
                //         //通常情况下：
                //         normal: {
                //             color: 'rgb(110,112,116)',
                //         },
                //         //鼠标悬停时：

                //     },

                // },

                // {
                //     name: 'MES1级报警',
                //     type: 'bar',
                //     value: '53',
                //     label: {
                //         normal: {
                //             show: true,
                //             position: 'inside'
                //         }
                //     },
                //     //设置柱子的宽度
                //     //barWidth: 30,
                //     //配置样式
                //     itemStyle: {
                //         //通常情况下：
                //         normal: {
                //             color: 'rgb(145,199,174)',
                //         },
                //         //鼠标悬停时：

                //     },

                // },

                // {
                //     name: '特殊作业',
                //     type: 'bar',
                //     value: '64',
                //     label: {
                //         normal: {
                //             show: true,
                //             position: 'inside'
                //         }
                //     },
                //     //设置柱子的宽度
                //     //barWidth: 30,
                //     //配置样式
                //     itemStyle: {
                //         //通常情况下：
                //         normal: {
                //             color: 'rgb(189,162,154)',
                //         },
                //         //鼠标悬停时：

                //     },

                // }


            ]
        };

        ///////////////////////////////optionZ2_end/////////////////////////////

        myChart.setOption(optionZ1);
        myChart2.setOption(option);
        myChart3.setOption(option2);
        myChart5.setOption(option3);
            //myChart6.setOption(option);
    </script>
</body>

</html>